<template>
  <div class="warp-container">
    <!-- 导航栏 编辑器-->
    <div v-if="queryParams && queryParams.design_type == 1" class="header-container">
      <Header />
    </div>
    <div v-else class="header-container">
      <Header />
    </div>
    <!-- 导航栏 -->

    <!-- 画布 -->
    <div id="canvasContentEl" class="canvas-content">
      <canvas ref="canvasContentEl1" id="canvas"></canvas>
      <div class="water-container"></div>
    </div>
    <!-- 画布 -->

    <!-- 尾部 -->
    <div v-if="queryParams && queryParams.design_type == 1" id="footer-container" class="footer-container">
      <Footer />
    </div>
    <!-- 用户尾部 -->

    <!-- 提示 -->
    <div
      v-else
      id="footer-container"
      class="footer-container"
      :class="{
        'design-footer-container': queryParams && queryParams.design_type == 2
      }">
      <!-- 通知栏 -->
      <div class="noticebar">
        <div class="noticebar-text">
          <span class="color-red">温馨提示：&#8593 &#8593</span>
          <span class="color-gary">内容可</span>
          <span class="color-blue">移动</span>
          <span class="color-gary">(按住拖动)、</span>
          <span class="color-blue">缩放</span>
          <span class="color-gary">(按住</span>
          <img class="image-icon" src="https://img.alicdn.com/imgextra/i1/1888948409/O1CN01SLRwMV2BzNOm6ulMZ_!!1888948409.png">
          <span class="color-gary">可缩放)、</span>
          <span class="color-blue">旋转</span>
          <span class="color-gary">(按住</span>
          <img class="image-icon" src="../../assets/images/common/rotate.png">
          <span class="color-gary">可旋转)、</span>
          <span class="color-gary">可缩放)、</span>
          <span class="color-blue">镜像</span>
          <span class="color-gary">(按住</span>
          <img class="image-icon" src="../../assets/images/common/jingxiang.png">
          <span class="color-gary">可镜像)、</span>
          <span class="color-gary">可改字、可换图，保存后高清无水印。</span>
        </div>
      </div>

      <!-- 更换元素 -->
      <div class="change-object">
        <!-- <div
          class="change-object-item"
          :class="{
            'active': currentChangeType === 'changeText'
          }"
          @click="handleChangeType('changeText')">换姓氏</div> -->
        <div
          v-if="imageListData && imageListData.length > 0"
          class="change-object-item"
          :class="{
            'active': currentChangeType === 'changeImage'
          }"
          @click="handleChangeType('changeImage')">换图/文字</div>
        <div
          v-if="stickerList && stickerList.length > 0"
          class="change-object-item"
          :class="{
            'active': currentChangeType === 'changeSticker'
          }"
          @click="handleChangeType('changeSticker')">换贴纸</div>
        <div
          class="change-object-item"
          :class="{
            'active': currentChangeType === 'changeTemplate'
          }"
          @click="handleChangeType('changeTemplate')">换模板</div>
      </div>

      <!-- 元素列表 -->
      <div class="footer-layer-container">
        <div v-if="currentChangeType === 'changeText'" class="layer-content">
          <template
            v-for="(item, index) in itemList">
            <div
              v-if="item.type === 'textbox' && item.textDirection"
              class="layer-item layer-item-active"
              :class="{
                'layer-item-active': currentSelectionElement && index === currentSelectionElement._index
              }"
              @click="handleSurnameObjectItem(index)">
              <!-- 图片 -->
              <div class="textbox-item2">
                <div v-if="item.xieYinText" class="text-item"><span class="text">{{ item.xieYinText }}</span></div>
                <div class="text-item"><span class="text">{{ item.text }}</span></div>
                <!-- <div class="change-image-tip">
                  <van-icon name="edit" size="20" />
                  <div class="change-image-text">点击更换</div>
                </div> -->
              </div>
            </div>
          </template>
        </div>
        <div v-if="currentChangeType === 'changeImage'" class="layer-content">
          <template
            v-for="(item, index) in itemList">
            <div
              v-if="item.selectable && !item.isXieyinImage"
              class="layer-item"
              :class="{
                'layer-item-active': currentSelectionElement && index === currentSelectionElement._index
              }"
              @click="handleObjectItem(index)">
              <!-- 图片 -->
              <div v-if="item.type === 'image'" class="img-item">
                <van-image
                  width="100%"
                  height="100%"
                  fit="contain"
                  :src="item.src"
                />
                <div v-if="currentSelectionElement && index === currentSelectionElement._index" class="change-image-tip">
                  <van-icon name="photo-o" size="20" />
                  <div class="change-image-text">点击替换</div>
                </div>
              </div>
              <div v-else class="textbox-item">
                <span class="text">{{ item.text }}</span>
                <div v-if="currentSelectionElement && index === currentSelectionElement._index" class="change-image-tip">
                  <van-icon name="edit" size="20" />
                  <div class="change-image-text">编辑文字</div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div v-else-if="currentChangeType === 'changeSticker'" class="layer-content">
          <template
            v-for="(item, index) in stickerList">
            <!-- 图片 -->
            <div
              class="layer-item"
              :class="{
                'layer-item-active': index === currentStickerIndex
              }"
              @click="handleChangeSticker(index, item.image)">
              <div class="img-item">
                <van-image
                  width="100%"
                  height="100%"
                  fit="contain"
                  :src="item.image"
                />
              </div>
            </div>
          </template>
        </div>
        <div v-else-if="currentChangeType === 'changeTemplate'" class="layer-content">
          <template
            v-for="item in templateList">
            <!-- 图片 -->
            <div
              class="layer-item"
              :class="{
                'layer-item-active': item.id == currentTemplateId
              }"
              @click="handleTemplate(item)">
              <div class="img-item">
                <van-image
                  width="100%"
                  height="100%"
                  fit="contain"
                  :src="item.cover_url"
                />
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 隐藏点击上传图片元素 -->
    <van-uploader
      v-if="queryParams && (queryParams.origin === 'h5' || queryParams.origin === 'kuaishou' || queryParams.origin === 'weixin')"
      id="h5Upload"
      name="file"
      style="display: none;"
      :preview-image="false"
      :after-read="h5UploadImage">
    </van-uploader>

    <!-- 更换文字 -->
    <van-popup
      v-model="showPopup"
      @close="handleEditTextClose"
      position="center"
      class="edit-text-container"
      :overlay-style="{
        background: 'rgba(0, 0, 0, .8)'
      }">
      <div class="edit-text-content">
        <div class="title-content">修改内容</div>
        <van-field
          v-model="text"
          label=""
          size="large"
          label-width="0"
          placeholder="请输入您要替换的文字"
          class="text-field"
          :clearable="true" />
      </div>
      <div class="btn-container">
        <van-button type="default" block style="margin-right: 12px;" @click="handleEditTextClose">关闭</van-button>
        <van-button type="info" block @click="handleConfirmText" color="linear-gradient(to right, #8773f9, #1989fa)">确定</van-button>
      </div>
    </van-popup>

    <!-- 谐音姓氏 -->
    <van-popup
      v-model="showXieYinPopup"
      @close="handleXieYinClose"
      position="center"
      :close-on-click-overlay="true"
      class="surname-xieyin-container"
      :overlay-style="{
        background: 'rgba(0, 0, 0, .8)'
      }">
      <div class="surname-xieyin-title">查找姓氏谐音</div>
      <div class="xieyin-container">
        <div class="xieyin-left">
          <div class="surname-content">
            <van-field
              v-model="surname1"
              label="输入姓氏"
              size="large"
              label-width="70"
              placeholder="输入您的姓氏"
              @click="currentSurname = 1"
              @input="querySurnameXinyinBySurname"
              class="surname-field surname-field1">
              <template #button>
              </template>
            </van-field>
          </div>
          <div class="xieyin-content">
            <div class="xieyin-item-content">
              <div
                class="xieyin-item"
                v-for="(item, index) in xieyinList1"
                :key="index"
                :class="{
                  'active': index === currentXinyinIndex1
                }"
                @click="currentXinyinIndex1 = index">{{ item }}</div>
                <div v-if="surname1" class="xieyin-item add-item-xinyin" @click="handleCustomSurnameXieyin(1)">
                  <van-icon name="add-o" style="position: relative; top: 1px;margin-right: 2px;" />
                  <span style="font-size: 12px;">自定义</span>
                </div>
            </div>
          </div>
        </div>
        <div class="xieyin-right" style="display: none;">
          <div class="surname-content">
            <van-field
              v-model="surname2"
              label="女生姓氏"
              size="large"
              label-width="70"
              placeholder="输入姓氏"
              @click="currentSurname = 2"
              @input="querySurnameXinyinBySurname"
              class="surname-field surname-field2">
              <template #button>
              </template>
            </van-field>
          </div>
          <div class="xieyin-content">
            <div class="xieyin-item-content">
              <div
                class="xieyin-item"
                v-for="(item, index) in xieyinList2"
                :key="index"
                :class="{
                  'active': index === currentXinyinIndex2
                }"
                @click="currentXinyinIndex2 = index">{{ item }}</div>
                <div v-if="surname2" class="xieyin-item add-item-xinyin" @click="handleCustomSurnameXieyin(2)">
                  <van-icon name="add-o" style="position: relative; top: 1px;margin-right: 2px;" />
                  <span style="font-size: 12px;">自定义</span>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="xieyin-btn">
        <div class="confirm-btn" @click="confirmSurnameXinyin">确定</div>
      </div>
    </van-popup>

    <!-- 自定义谐音 -->
    <van-popup
      v-model="showCustomSurnameXieyin"
      position="center"
      class="custom-surname-container">
      <div>
        <div class="custom-surname-title">当前姓氏：{{ currentCustomSurnameXieyin == 1 ? surname1 : surname2 }}</div>
        <div class="custom-surname-item">
          <van-field
            v-model="customSurnameXinyin"
            rows="1"
            label=""
            label-width="0"
            type="textarea"
            placeholder="请输入姓氏谐音例如(刘：为爱停刘)"
          />
        </div>
        <div class="custom-surname-btn">
          <div class="cancel-btn btn" @click="showCustomSurnameXieyin = false">取消</div>
          <div class="confirm-btn btn" @click="handleConfirmCustomSurnameXieyin">确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import Header from '@/components/Header';
  import Footer from '@/components/Footer';
  import { diyTemplateDetailById, getAuthToke, checkTxt, querySurnameXinyinBySurname, templateAllListByToolId } from '@/utils/api';
  export default {
    name: 'Me',
    components: {
      Footer,
      Header
    },
    data() {
      return {
        showXieYinPopup: true,
        showSelectBackground: false,
        canvas: null,
        queryParams: null,
        showPopup: false,
        text: '',
        currentIndex: 0,
        itemList: [],
        currentSelectionElement: null,
        surname1: '',
        surname2: '',
        showCustomSurnameXieyin: false, // 设置自定义谐音
        currentCustomSurnameXieyin: '', // 当前自定义谐音类型
        customSurnameXinyin: '', // 自定义谐音表单
        imageListData: [], // 图片列表
        templateList: [], // 模板列表
        currentTemplateId: '', // 当前模板id
        currentSurname: 1, // 当前输入谐音
        stickerList: [], // 贴纸列表
        currentStickerIndex: 0, // 当前贴纸
        xieyinList1: [], // 谐音列表1
        xieyinList2: [], // 谐音列表2
        currentXinyinIndex1: 0, // 当前选中谐音
        currentXinyinIndex2: 0, // 当前选中谐音
        currentChangeType: 'changeImage' // 当前更换类型
      }
    },

    watch: {
      '$store.state.user.queryParams': {
        immediate: true,
        handler(val, oldVal) {
          this.queryParams = val;
        }
      },
      '$store.state.design.currentChangeType': {
        handler(val, oldVal) {
          this.currentChangeType = val;
        }
      },
      '$store.state.design.showTextFlag': {
        immediate: true,
        handler(val, oldVal) {

          if (val) {
            const handAccountCanvas = this.handAccountCanvas.getObject().getActiveObject();
            this.text = handAccountCanvas.text;
          }

          this.showPopup = val;
        }
      },
      '$store.state.design.showXinYinFlag': {
        immediate: true,
        handler(val, oldVal) {
          this.showXieYinPopup = val;
        }
      },
      '$store.state.design.currentSelectionElement': {
        immediate: true,
        handler(val, oldVal) {
          if (val) {
            this.currentSelectionElement = val;
          } else {
            this.currentSelectionElement = null;
          }
        }
      },
      '$store.state.design.itemList': {
        immediate: true,
        deep: true,
        handler(val, oldVal) {
          if (val) {
            this.itemList = val;
          }
        } 
      }
    },

    mounted() {
      this.$nextTick(async () => {
        let queryParams = this.$store.state.user.queryParams;
        this.getAuthToke();
        await this.handAccountCanvas.initCanvas(queryParams.design_type);
        this.getDiyTemplateDetailById();
      })
    },
    methods: {

      // 关闭函数
      beforeClose(action, done) {
        if (action !== 'confirm') {
          done();
        }
      },

      // 确定当前自定义谐音
      handleConfirmCustomSurnameXieyin() {
        let currentCustomSurnameXieyin = this.currentCustomSurnameXieyin;
        let surname = currentCustomSurnameXieyin == 1 ? this.surname1 : this.surname2;
        let customSurnameXinyin = this.customSurnameXinyin;
        if (customSurnameXinyin && customSurnameXinyin.length === 4) {
          let customSurnameXinyinArray = customSurnameXinyin.split('');
          let surnameIndex = customSurnameXinyinArray.findIndex(item => item === surname);
          if (surnameIndex < 0) {
            this.$toast({
              position: 'top',
              message: '当前输入的内容未包含姓氏',
              duration: 3 * 1000
            });
          } else {
            if (currentCustomSurnameXieyin == 1) {
              this.xieyinList1.unshift(customSurnameXinyin);
              this.currentXinyinIndex1 = 0;
            } else if (currentCustomSurnameXieyin == 2) {
              this.xieyinList2.unshift(customSurnameXinyin);
              this.currentXinyinIndex2 = 0;
            }
            this.showCustomSurnameXieyin = false;
            this.customSurnameXinyin = '';
          }
        } else {
          this.$toast({
            position: 'top',
            message: '请输入姓氏谐音，四个字',
            duration: 3 * 1000
          });
        }
      },

      // 自定义谐音
      handleCustomSurnameXieyin(currentCustomSurnameXieyin) {
        this.currentCustomSurnameXieyin = currentCustomSurnameXieyin;
        this.showCustomSurnameXieyin = true;
      },

      // 切换类型
      handleChangeType(currentChangeType) {
        this.currentChangeType = currentChangeType;
        this.$store.dispatch('design/setCurrentChangeType', currentChangeType);
      },

      // 更换贴纸
      handleChangeSticker(index, image) {
        this.currentStickerIndex = index;
        this.handAccountCanvas.changeSticker({
          uri: image,
        })
      },

      // 确定姓氏
      confirmSurnameXinyin() {
        let surname1 = this.surname1;
        let surnameXieyin1 = this.xieyinList1[this.currentXinyinIndex1];
        if (!surname1) {
          return this.$toast({
            position: 'top',
            message: '请输入你的姓氏',
            duration: 3 * 1000
          });
        }
        if (!surnameXieyin1) {
          return this.$toast({
            position: 'top',
            message: '请选择你的姓氏谐音短句或成语',
            duration: 3 * 1000
          });
        }

        // 更改你的姓氏
        this.handAccountCanvas.changeSurnameXieYie({
          type: 'changeXieYin',
          content: {
            text: surnameXieyin1,
            xieYinText: surname1,
            xieyinIndex: 0
          }
        }).then(() => {
          this.handleXieYinClose();
          this.$toast({
            position: 'center',
            message: '操作成功',
            duration: 3 * 1000
          });
        });

      },

      // 搜索姓氏谐音成语
      async querySurnameXinyinBySurname() {
        let surname = this.currentSurname == 1 ? this.surname1 : this.surname2;
        const reg = /^[\u4E00-\u9FA5]+$/;
        if (reg.test(surname)) {
          this.$toast.loading({
            message: '加载中...',
            position: 'center',
            forbidClick: true,
            duration: 0
          });
          await querySurnameXinyinBySurname({
            surname
          }).then(result => {
            this.$toast.clear();
            if (result && result.data && result.data.surname_xieyin_1) {
              if (this.currentSurname == 1) {
                this.xieyinList1 = result.data.surname_xieyin_1;
                this.currentXinyinIndex1 = 0;
              } else {
                this.xieyinList2 = result.data.surname_xieyin_1;
                this.currentXinyinIndex2 = 0;
              }
            } else {
              if (this.currentSurname == 1) {
                this.xieyinList1 = [];
                this.currentXinyinIndex1 = 0;
              } else {
                this.xieyinList2 = [];
                this.currentXinyinIndex2 = 0;
              }
              this.$toast({
                position: 'top',
                message: '暂未收录此姓氏谐音;\n可通过自定义内容哦',
                duration: 3 * 1000
              });
            }
          }).catch(() => {
            this.$toast.clear();
          })
        }
      },

      // 关闭谐音框
      handleXieYinClose() {
        this.$store.dispatch('design/setShowXieYinFlag', false);
      },

      // 设置
      handleObjectItem(_index) {
        const handAccountCanvas = this.handAccountCanvas.getObject();
        const items = handAccountCanvas.getObjects();
        let actvieItem = items[_index];
        handAccountCanvas.setActiveObject(actvieItem);
        handAccountCanvas.renderAll();
        if (actvieItem.type === 'textbox') {
          this.$store.dispatch('design/setShowTetxFlag', true);
        } else if (actvieItem.type === 'image') {
          this.handAccountCanvas.handleChangeImage();
        }
      },

      // 修改姓氏
      async handleSurnameObjectItem() {
        this.$store.dispatch('design/setShowXieYinFlag', true);
        let xieyinLetterList = this.itemList.filter(item => item.textDirection);
        let index = 0;
        for (const item of xieyinLetterList) {
          index = index + 1;
          this.currentSurname = index;
          if (index === 1) {
            this.surname1 = item.xieYinText;
            await this.querySurnameXinyinBySurname();
          } else {
            this.surname2 = item.xieYinText;
            await this.querySurnameXinyinBySurname();
          }
        }
        console.log(this.surname1, this.surname2)
      },
      
      // 确定输入文字
      handleConfirmText() {
        this.$toast.loading({
          message: '检测中...',
          position: 'center',
          forbidClick: true,
          duration: 0
        });
        checkTxt({
          text: this.text,
        }).then(result => {
          this.$toast.clear();
          if (result && result.data) {
            this.handAccountCanvas.updateTextBox({
              type: 'text',
              content: this.text
            });
            this.handleEditTextClose();
            this.itemList[this.currentSelectionElement._index].text = this.text;
          }
        }).catch((err) => {
          this.$toast.clear();
          this.$toast({
            message: err.msg,
            duration: 1500,
            forbidClick: true
          });
        })
      },

      // 关闭文字框
      handleEditTextClose() {
        this.$store.dispatch('design/setShowTetxFlag', false);
      },

      // 上传图片
      h5UploadImage(files) {
        this.handAccountCanvas.h5Upload(files).then(result => {
        let image = result.cover_path;
        // 检测图片
        this.handAccountCanvas.censorImage(image).then(result_ => {
          this.handAccountCanvas.updatedImageItem({
            type: 'src',
            uri: result_.url
          }).then(imageResult => {
            this.itemList[this.currentSelectionElement._index].src = result_.url;
            if (imageResult && imageResult.width > 200) {
              this.handAccountCanvas.updatedImageItem({
                type: 'width'
              })
            }
          })
        })
      });
      },

      // 点击模板
      handleTemplate(itemData) {
        let queryParams = this.$store.state.user.queryParams;
        let data = itemData;
        let imageListData = [];
        this.$store.dispatch('design/setTemplateDetail', data);
        let params = data.params;
        params.objects.forEach((item, index) => {
          item._index = index;
          if (item.type === 'image' && item.selectable && !item.isXieyinImage) {
            imageListData.push(item);
          } else if (item.type === 'textbox' && item.selectable) {
            imageListData.push(item);
          }
        });
        this.imageListData = imageListData;
        this.$store.dispatch('design/setItemList', params.objects);
        this.handAccountCanvas.reloadCanvas().then(() => {
          this.handAccountCanvas.canvasLoadJson(params, queryParams.design_type, 2).then(() => {
            // this.handAccountCanvas.setFirstItemActive();

            let surname1 = this.surname1;
            let surname2 = this.surname2;
            let surnameXieyin1 = this.xieyinList1[this.currentXinyinIndex1];
            let surnameXieyin2 = this.xieyinList2[this.currentXinyinIndex2];

            if (surname1 && surname2 && surnameXieyin1 && surnameXieyin2) {
              // 更改你的姓氏
              this.handAccountCanvas.changeSurnameXieYie({
                type: 'changeXieYin',
                content: {
                  text: surnameXieyin1,
                  xieYinText: surname1,
                  xieyinIndex: 0
                }
              }).then(() => {
                // 更改Ta的姓氏
                this.handAccountCanvas.changeSurnameXieYie({
                  type: 'changeXieYin',
                  content: {
                    text: surnameXieyin2,
                    xieYinText: surname2,
                    xieyinIndex: 1
                  }
                }).then(() => {
                  this.handleXieYinClose();
                });
              });
            }

          });
        })

        // 贴纸
        this.stickerList = data.items;

        // 当前模板id
        this.currentTemplateId = data.id;
      },

      // 获取详情
      getDiyTemplateDetailById() {
        let queryParams = this.$store.state.user.queryParams;
        let currentTime = parseInt(new Date().getTime() / 1000);
        let requestTime = parseInt(((queryParams.t || 0) / 1000));
        if (queryParams.t && (currentTime - requestTime) > 90 && queryParams.origin !== 'h5') {
          location.href = 'https://design.guxitk.com';
          return;
        }
        if (queryParams.id) {
          this.$toast.loading({
            message: '加载中',
            position: 'center',
            forbidClick: true,
            duration: 0
          });
          diyTemplateDetailById({
            id: queryParams.id
          }).then(result => {
            this.$toast.clear();
            if (result && result.data) {
              let data = result.data;
              let imageListData = [];
              this.$store.dispatch('design/setTemplateDetail', data);
              let params = data.params;
              params.objects.forEach((item, index) => {
                item._index = index;

                if (item.type === 'image' && item.selectable && !item.isXieyinImage) {
                  imageListData.push(item);
                }

              });
              this.$store.dispatch('design/setItemList', params.objects);
              this.handAccountCanvas.canvasLoadJson(params, queryParams.design_type).then(() => {
                // this.handAccountCanvas.setFirstItemActive();
              });

              // 换图
              this.imageListData = imageListData;

              // 贴纸
              this.stickerList = data.items;

              // 获取其他模板
              this.currentTemplateId = data.id;
              this.getTemplateAllListByToolId(data.tool_id);
            }
          }).catch(() => {
            this.$toast.clear();
          })
        }
      },

      // 获取其他模板列表
      getTemplateAllListByToolId(tool_id) {
        templateAllListByToolId({
          tool_id
        }).then(result => {
          if (result && result.data && result.data.length > 0) {
            this.templateList = result.data;
          }
        })
      },

      // 获取token
      getAuthToke() {
        let queryParams = this.$store.state.user.queryParams;
        let currentTime = parseInt(new Date().getTime() / 1000);
        let requestTime = parseInt(((queryParams.t || 0) / 1000));
        if (queryParams.t && (currentTime - requestTime) > 90 && queryParams.origin !== 'h5') {
          location.href = 'https://design.guxitk.com';
          return;
        }
        if (queryParams && queryParams.auth_key) {
          getAuthToke({
            auth_key: queryParams.auth_key
          }).then(result => {
            if (result && result.data && result.data.token) {
              this.$store.dispatch('user/setToken', result.data.token);
            }
          })
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  @import '../../assets/common.less';

  .warp-container{
    height: 100%;
    background-color: @accessoryColor;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  .canvas-container{
    // border-radius: 8px;
    overflow-x: hidden;
    -webkit-transform: rotate(0deg);
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .canvas-content{
    width: 100%;
    // border-radius: 8px;
    // overflow: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    -webkit-transform: rotate(0deg);
    position: relative;
    background-size: cover;

    .water-container{
      width: 100%;
      height: 100%;
      // background: url(https://img.alicdn.com/imgextra/i4/1888948409/O1CN01teMfIu2BzNOvSPmhT_!!1888948409.png);
      background: url(https://baiwan-product.oss-cn-hangzhou.aliyuncs.com/watermark/desingshuiying.png);
      background-size: cover;
      position: absolute;
      pointer-events: none;
    }
  }

  .header-container{
    height: 46px;
    width: 100%;
    background: @accessoryColor;
    // position: fixed;
    // top: 0;
    // z-index: 999;
  }

  .header-container-padding{
    padding-top: 12px;
  }

  .footer-container{
    height: 68px;
    width: 100%;
    background: @mainColor;
    position: relative;
    z-index: 9999;
  }

  .design-footer-container{
    height: 242px;
    z-index: 99;

    .noticebar {
      overflow: hidden;
      white-space: nowrap;
      background-color: #444;
      padding: 6px 0;
      display: flex;
      align-items: center;
      vertical-align: center;
      // margin-bottom: 8px;
    }

    .color-red{
      color: rgb(235, 32, 32);
      font-size: 12px;
    }

    .color-gary{
      color: #f5f5f5;
      font-size: 12px;
    }

    .color-blue{
      color: #8773f9;
      font-size: 12px;
    }

    .image-icon{
      width: 16px;
      height: 16px;
      position: relative;
      top: 4px;
    }

    .noticebar-text {
      display: inline-block;
      padding-left: 100%;
      animation: noticebar-slide 24s linear infinite;
    }
  }

  .footer-layer-container{
    width: 100%;
    
    .layer-content{
      // width: 100%;
      height: 156px;
      padding: 0 12px;
      display: flex;
      // align-items: center;
      overflow-y: auto;
      flex-wrap: wrap;

      .layer-item{
        max-width: 60px;
        min-width: 60px;
        height: 60px;
        margin-right: 5px;
        margin-bottom: 8px;
        border-radius: 4px;
        background-image: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), linear-gradient(90deg, #d2d2d2, #d2d2d2);
        border: 2px solid transparent;
        overflow: hidden;
      }

      // .layer-item:nth-child(5n) {
      //   margin-right: 0;
      // }

      .layer-item,
      .larer-item-active {
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
      }

      .layer-item-active{
        border: 2px solid transparent;
        border-radius: 4px;
        background-image: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), linear-gradient(180deg, #1989fa, #8773f9);
      }

      .textbox-item,
      .img-item{
        width: 100%;
        height: 100%;
        position: relative;
      }

      .change-image-tip{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .8);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8773f9;
        flex-direction: column;
      }

      .change-image-text{
        font-size: 12px;
        font-weight: bold;
      }

      .textbox-item{
        width: 100%;
        height: 100%;
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;

        .text{
          font-size: 12px;
          color: #fff;
        }
      }

      .textbox-item2{
        flex-wrap: wrap;
        padding: 2px;
        display: flex;
        align-items: center;
        padding: 12px 0;

        .text-item{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 16px;
          line-height: 16px;
        }

        .text-item:nth-child(1){
          margin-bottom: 6px;
        }

        .text{
          font-size: 12px;
          color: #fff;
        }
      }
    }
  }

  .edit-text-container{
    width: 288px;
    padding: 12px 16px 24px 16px;
    border-radius: 8px;
    overflow: hidden;
    top: 25%;

    .title-content{
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      padding: 12px 0 24px 0;
    }

    .text-field{
      background-color: #f5f5f5;
      border-radius: 8px;
      margin-bottom: 24px;
    }

    .btn-container{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .surname-xieyin-container{
    width: 250px;
    padding: 16px 12px;
    border-radius: 8px;
    overflow: hidden;
    // top: 25%;
    
    .xieyin-container{
      display: flex;

      .xieyin-right,
      .xieyin-left{
        padding: 8px;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
      }

      .xieyin-left{
        background-color: #e9f2fc;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }

      .xieyin-right{
        background-color: #fcf4f2;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }

      .van-field__label{
        margin-right: 6px;
      }

      .surname-field{
        padding: 10px 0;
      }

      .surname-field1{
        background-color: #e9f2fc;
      }

      .surname-field2{
        background-color: #fcf4f2;
      }

      .van-cell{
        align-items: center;
      }

      .van-field__control{
        background-color: #fff;
        text-align: center;
        height: 36px;
        border-radius: 4px;
      }

      .xieyin-content{
        width: 100%;
        padding: 12px;
        background: #fff;
        border-radius: 8px;
        display: flex;

        .xieyin-item-content{
          // display: flex;
          // flex-wrap: wrap;
          // justify-content: center;
          height: 300px;
          overflow-y: auto;
          overflow-x: hidden;
          margin: auto;
        }

        .xieyin-item{
          margin: auto;
          width: 100px;
          height: 32px;
          margin-bottom: 8px;
          border-radius: 4px;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #646566;
          background: #f5f5f5;
        }

        .xieyin-item.active{
          background: linear-gradient(to right, rgb(135, 115, 249), rgb(25, 137, 250));
          color: #fff;
        }

        .add-item-xinyin{
          color: rgb(25, 137, 250);
        }
      }
    }

    .xieyin-btn{
      margin-top: 12px;
      .confirm-btn{
        height: 48px;
        background: linear-gradient(to right, rgb(135, 115, 249), rgb(25, 137, 250));
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #fff;
      }
    }
  }

  .change-object{
    height: 38px;
    padding-bottom: 18px;
    display: flex;
    position: relative;
    width: 100%;
    align-items: center;

    .change-object-item{
      display: flex;
      flex: 1;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      position: relative;
      padding-bottom: 8px;
    }

    .change-object-item.active{
      color: #1989fa;
    }

    .change-object-item.active::before{
      display: block;
      content: '';
      width: 16px;
      height: 3px;
      background: #1989fa;
      border-radius: 1px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      margin: auto;
    }
  }

  .change-object::before{
    position: absolute;
    width: 100%;
    height: 1px;
    background: #888;
    bottom: 16px;
    left: 0;
    right: 0;
    content: '';
    display: block;
  }

  .surname-xieyin-title{
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 0 0 12px 0;
    text-align: center;
  }

  .custom-surname-container{
    padding: 24px;
    width: 272px;
    border-radius: 8px;

    .custom-surname-title{
      font-size: 16px;
      padding-bottom: 24px;
      font-weight: bold;
      color: #333;
    }

    .custom-surname-btn{
      padding: 24px 0 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .btn{
        flex: 1;
        height: 36px;
        border-radius: 4px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cancel-btn{
        margin-right: 24px;
        background-color: #f5f5f5;
        color: #888;
      }

      .confirm-btn{
        background: linear-gradient(to right, #8773f9, #1989fa);
        color: #fff;
      }
    }

    .van-field{
      background-color: #f5f5f5;
      border-radius: 8px;
    }
  }

  @keyframes noticebar-slide {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @media screen and (max-width: 391px) {
    .footer-layer-container .layer-content .layer-item{
      // margin-right: 7px;
    }
  }

  @media screen and (max-width: 376px) {
    .footer-layer-container .layer-content .layer-item{
      // margin-right: 10px;
    }
  }
</style>
